由於小弟近日專案需要使用文字編輯器，於是選擇了 CKEditor 5，意外發現這鬼東西有夠難用，所以記錄一下使用過程，以防我以後又忘記~哈哈哈哈

安裝 CKEditor 5

目前官方共有提供四種版本供使用，分別為 Classic、Inline、Balloon、Decoupled，在此我選用最基礎的 Classic 版本進行開發

$ npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

將 CKEditor 5 作為 plugin 載入

首先於 plugins 資料夾內新增 ckeditor.js 檔案，並載入 & 啟用 CKEditor 5

// plugins/ckeditor.js
import Vue from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue'

Vue.use(CKEditor);

將將剛剛的檔案載入 nuxt.config.js 內的 plugins，且關閉 SSR

// nuxt.config.js
module.exports = {
  plugins: [
    { src: '~/plugins/ckeditor.js', ssr: false }
  ]
}

以上步驟完成後就已經將 CKEditor 5 作為 plugin 載入 nuxt 中了

將 CKEditor 5 插入頁面內

首先我們將 ckeditor 的標籤插入檔案內，且綁定 editor 與 editorConfig，並記得將 Classic 樣式載入，若無需做額外的設定也可以不必綁定 editorConfig

<template>
  <div class="container">
    <ckeditor :config="editorConfig" :editor="editor"></ckeditor>
  </div>
</template>

<script>
let ClassicEditor
if (process.browser) {
  ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
}
// 因為 node 沒有 window 屬性，故以此方式載入 Classic 樣式

export default {
  data() {
    return {
      editor: ClassicEditor,
      // Classic 樣式
      editorConfig: {
        // 客製化設定
      }
    }
  }
}
</script>

到此就已經成功將 CKEditor 載入我們的頁面了

客製化自己的 CKEditor

想對基礎功能做調整可直接在 editorConfig 進行設定，但若要新增其他功能的話，則需要另外安裝 plugin，詳細可參考官方文檔

客製化基礎功能

這邊示範一些簡單的功能給大家看，基本上都只要做些簡單的設定或是 css 的調整即可

初始化與工具列

工具列相關直接調整即可，另外還可設定語言，詳細可參考官方文檔

editorConfig: {
  toolbar: {
    items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList' ],
    // 設定工具列，可使用'|'隔開功能
  },
  removePlugins: ['Bold', 'Italic'],
  // 刪除工具列的功能
  placeholder: '請輸入文章...',
  // 當編輯器內容為空時顯示此字串
  initialData: '<h2>我是預設字串</h2>',
  // 初始化載入文字
  heading: {
  // 設定 Heading 內的樣式，可新增多個
    options: [
      {
        model: 'paragraph',
        title: 'Paragraph',
        class: 'ck-heading_paragraph'
      },
      {
        model: 'heading1',
        view: 'h2',
        title: 'Heading 1',
        class: 'ck-heading_heading1'
      },
      {
        model: 'heading2',
        view: 'h3',
        title: 'Heading 2',
        class: 'ck-heading_heading2'
      }
    ]
  },
  language: 'zh'
  // 設定語言
}

若要調整編輯器寬高可使用 css 來做調整

.ck-editor__editable{
  min-height: 200px;
}

上傳圖片

上傳圖片可以使用 ckfinder，需要特別注意的是這邊設定 form-data 的 name 是 upload

editorConfig: {
  ckfinder: {
    uploadUrl: `${process.env.url}/upload`,
    // 後端的上傳圖片 API 路徑
    options: {
      resourceType: "Images"
      // 限定類型為圖片
  }
}

圖片對齊

圖片對齊亦可直接設定，不過還需另外引入 css 來使用，詳細可參考官方文檔

editorConfig: {
  image: {
  // 設定圖片可選擇的對齊方式
    toolbar: [
      'imageTextAlternative',
      '|',
      'imageStyle:side',
      'imageStyle:full',
      'imageStyle:alignLeft',
      'imageStyle:alignCenter',
      'imageStyle:alignRight'
    ],
    styles: ['full', 'side', 'alignLeft', 'alignCenter', 'alignRight']
  }
}

附上官方 css 設定供參考

:root {
  --ck-image-style-spacing: 1.5em;
}
.image-style {
  .image-style-side,
  .image-style-align-left,
  .image-style-align-center,
  .image-style-align-right {
    max-width: 50%;
  }

  .image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
  }

  .image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
  }

  .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
  }

  .image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
  }
}

影片

影片連結在基本的編輯器加上設定即可顯示，不過還需另外搭配 css

editorConfig: {
  mediaEmbed: {
    previewsInData: true
    // 設定影片為可見的格式
  }
}

.media > div{
  width: 100%;
}

安裝 plugin 客製化

若基本功能無法滿足需求時，則可安裝 plugin 來擴充功能，可參考官方文檔

首先下載 classic 的專案，並進入資料夾使用 mpm 安裝套件

$ git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
$ cd ckeditor5-build-classic
$ npm install

再來安裝需要的套件，這邊以 Highlight 進行示範

$ npm install --save @ckeditor/ckeditor5-highlight

開啟資料夾中的設定檔，並將套件載入，也可在這邊把預設樣式一併設定完成

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

// 將套件 import 進來
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
  Essentials,
  UploadAdapter,
  Autoformat,
  Bold,
  Italic,
  BlockQuote,
  EasyImage,
  Heading,
  Image,
  ImageCaption,
  ImageStyle,
  ImageToolbar,
  ImageUpload,
  Link,
  List,
  Paragraph,
  
  // 將套件加入建構工具列
  Highlight
];

// 這邊是預設的設定，剛剛上面的教學也可直接在這邊設定
ClassicEditor.defaultConfig = {
  // 加入 highlight 套件的設定
  highlight: {
    options: [
      {
        model: 'yellowMarker',
        class: 'marker-yellow',
        title: 'Yellow Marker',
        color: 'var(--ck-highlight-marker-yellow)',
		type: 'marker'
      },
      {
        model: 'greenMarker',
        class: 'marker-green',
        title: 'Green marker',
        color: 'var(--ck-highlight-marker-green)',
        type: 'marker'
      },
      {
        model: 'pinkMarker',
        class: 'marker-pink',
        title: 'Pink marker',
        color: 'var(--ck-highlight-marker-pink)',
        type: 'marker'
      },
      {
        model: 'blueMarker',
        class: 'marker-blue',
        title: 'Blue marker',
        color: 'var(--ck-highlight-marker-blue)',
        type: 'marker'
      },
      {
        model: 'redPen',
        class: 'pen-red',
        title: 'Red pen',
        color: 'var(--ck-highlight-pen-red)',
        type: 'pen'
      },
      {
        model: 'greenPen',
        class: 'pen-green',
        title: 'Green pen',
        color: 'var(--ck-highlight-pen-green)',
        type: 'pen'
      }
    ]
  },
  toolbar: {
    items: [
      'heading',
      '|',
      'bold',
      'italic',
      'link',
      'bulletedList',
      'numberedList',
      'imageUpload',
      'blockQuote',
      'undo',
      'redo',
           
      // 將套件放在想要的位置
      'Highlight'
    ]
  },
  image: {
    toolbar: [
      'imageStyle:full',
      'imageStyle:side',
      '|',
      'imageTextAlternative'
    ]
  },
  language: 'en'
};

使用指令進行編譯進行編譯

$ npm run build

最後將自己專案內 node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js 替換成編譯完成的 ckeditor5-build-classic/build/ckeditor.js 即可運作

結語

其實將 node_modules 內的東西替換掉不是很好的做法，只是小弟我目前還沒研究出其他方法，如果有人知道也麻煩跟我說一下XD